<template>
  <div class="myTable">
    <van-nav-bar title="历史轨迹" left-arrow @click-left="onClickLeft" />
    <div id="amap-show"></div>
    <div class="amap-page-container-info">
      <span
        style="
          text-align: center;
          color: black;
          font-size: 16px;
          margin-bottom: 5px;
        "
      >
        历史轨迹
      </span>
      <div class="amap-page-container-info-track">
        <div class="amap-page-container-info-track-time">
          <van-cell
            is-link
            center
            title="选择开始时间"
            @click="show = true"
            size="large"
            :label="startDate"
          ></van-cell>
          <van-cell
            is-link
            center
            title="选择结束时间"
            @click="showe = true"
            size="large"
            :label="endDate"
          ></van-cell>
        </div>
        <div class="amap-page-container-info-track-confirm">
          <el-button type="primary" @click="findTrackData">更新</el-button>
        </div>
      </div>
      <van-popup v-model="show" round position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          title="选择开始时间"
          @confirm="
            startDate = formatDate(currentDate);
            show = false;
          "
          @cancel="show = false"
        />
      </van-popup>
      <van-popup v-model="showe" round position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          title="选择结束时间"
          @confirm="
            endDate = formatDate(currentDate);
            showe = false;
          "
          @cancel="showe = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
// NPM 方式
import { lazyAMapApiLoaderInstance } from "vue-amap";

import carUrl from "@/assets/img/arror.png";
export default {
  name: "track-show",
  data() {
    return {
      showe: false,
      startDate: "",
      endDate: "",
      currentDate: new Date(),
      fieldValue: "",
      show: false,
      startTime: "",
      endTime: "",
      gpsData: "",
      gps1: "",
    };
  },
  created() {
    this.initMap();
    console.log("thisDate:", this.startDate);
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    startTime1() {
      this.show = false;
      console.log("ok");
      //console.log(this.currentDate)
      this.currentDate1 = this.formatDate(this.currentDate);
    },
    formatDate(params) {
      // let defalutParams = {
      //     date: new Date(),
      //     formatStr: 'yyyy-MM-dd HH:mm:ss'
      // }
      // params = { ...defalutParams, ...params };
      let date = params;
      let formatStr = "yyyy-MM-dd HH:mm:ss";
      // 传入日期字符串 - 转成时间戳 - 转成标准时间
      let timeStamp = params.getTime();
      console.log(timeStamp);
      date = new Date(timeStamp);
      formatStr = formatStr.replace(
        new RegExp("yyyy"),
        `${date.getFullYear()}`
      );
      const month = date.getMonth() + 1;
      formatStr = formatStr.replace(
        new RegExp("MM"),
        `${month > 9 ? month : "0" + month}`
      );
      const day = date.getDate();
      formatStr = formatStr.replace(
        new RegExp("dd"),
        `${day > 9 ? day : "0" + day}`
      );
      const hour = date.getHours();
      formatStr = formatStr.replace(
        new RegExp("HH"),
        `${hour > 9 ? hour : "0" + hour}`
      );
      const min = date.getMinutes();
      formatStr = formatStr.replace(
        new RegExp("mm"),
        `${min > 9 ? min : "0" + min}`
      );
      const sec = date.getSeconds();
      formatStr = formatStr.replace(
        new RegExp("ss"),
        `${sec > 9 ? sec : "0" + sec}`
      );
      return formatStr;
    },
    findTrackData() {
      this.currentDate1 = this.formatDate(this.currentDate);
      console.log(this.startTime);
      this.$http
        .get("http://121.5.58.100:8000/queryGPSHistoryList", {
          params: {
            startDate: this.startDate,
            endDate: this.endDate,
          },

          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((result) => {
          console.log(result);
          this.initPage(result.data.path);
        });
      // console.log("thisDate:",this.startDate);
    },
    initMap() {
      lazyAMapApiLoaderInstance.load().then(() => {
        this.map = new AMap.Map("amap-show", {
          center:[116.3975, 39.908],
          zoom: 12,
        });
      });
    },
    initPage(gpsDataBuf) {
      console.log("===== init===");

      lazyAMapApiLoaderInstance.load().then(() => {
        this.map = new AMap.Map(
          "amap-show",
          {
            center: [116.3975, 39.908],
            zoom: 15,
          },
          AMapUI.loadUI(["misc/PathSimplifier"], (PathSimplifier) => {
            if (!PathSimplifier.supportCanvas) {
              alert("当前环境不支持 Canvas！");
              return;
            }
            AMap.convertFrom(gpsDataBuf, "gps", (status, gpsData) => {
              if (gpsData.info === "ok") {
                //console.log(result.locations);
                this.gps1 = gpsData.locations; // Array.<LngLat>
                console.log(gpsData.locations);

                // console.log(this.gps1);

                //创建组件实例
                var pathSimplifierIns = new PathSimplifier({
                  zIndex: 100,
                  map: this.map, //所属的地图实例
                  getPath: (pathData) => {
                    //将gps描述的所有的点数放到全局变量
                    pathData.path.length; //返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
                    return pathData.path;
                  },
                  getHoverTitle: (pathData, pathIndex, pointIndex) => {
                    //返回鼠标悬停时显示的信息
                    if (pointIndex >= 0) {
                      //鼠标悬停在某个轨迹节点上
                      return (
                        pathData.name +
                        "，点:" +
                        pointIndex +
                        "/" +
                        pathData.path.length
                      );
                    }
                    //鼠标悬停在节点之间的连线上
                    return pathData.name + "，点数量" + pathData.path.length;
                  },
                  renderOptions: {
                    //轨迹线的样式
                    pathLineStyle: {
                      strokeStyle: "red",

                      lineWidth: 5, //线宽度
                      dirArrowStyle: {
                        stepSpace: 15, //stepSpace: {number} 箭头排布的间隔，单位像素
                      },
                    },
                  },
                });

                // console.log(gps1)
                pathSimplifierIns.setData([
                  {
                    name: "轨迹0",
                    path: this.gps1,
                  },
                ]);

                var nav = pathSimplifierIns.createPathNavigator(0, {
                  loop: true,
                  speed: 150,
                  pathNavigatorStyle: {
                    width: 10,
                    height: 10,
                    content: PathSimplifier.Render.Canvas.getImageContent(
                      carUrl,
                      onload,
                      onerror
                    ),
                    strokeStyle: null,
                    fillStyle: null,
                  },
                });
                nav.start();
              }
            });
            /*var currentIndex = -1; //定义一个临时 变量存储 navg move方法触发频发，展示数据只展示一次
                            let _this = this;
                            nav.on('move',function() {
                                var onecuso = nav.getCursor().idx; //move 一直触发 获取 轨迹中 的下标
                                if(onecuso > pointNum-1)return false;
                                if(currentIndex !== onecuso){
                                    currentIndex = onecuso;
                                    _this.speed1 = (speedArr[onecuso]*3.6).toFixed(1);  // 保留一位小数
                                }
                            });*/
          })
        );
      });
    },
    msg() {
      this.$notify.info({
        title: "提示",
        message: "暂无轨迹数据",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";

.amap-page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  position: absolute;
  &-map {
    height: 100%;
  }
  &-info {
    transition: 0.5s;
    margin: auto;
    // text-align: center;
    padding: 15px 15px;
    border-radius: 20px;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
    width: 88vw;
    height: auto;
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25px;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    background-color: rgba(255, 255, 255, 0.9);
    &-track {
      display: flex;
      flex-direction: row;
      &-time {
        flex: 7;
      }
      &-confirm {
        flex: 3;
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
      }
    }
    &-static {
      display: inline-block;
      width: 100%;

      &-on {
        float: left;
        color: green;
        font-size: 5vw;
      }
      &-off {
        float: left;
        color: red;
        font-size: 5vw;
      }
      &-gpsnum {
        float: right;
        color: blue;
        font-size: 4vw;
      }
    }
    &-more {
      margin-top: 10px;
      color: black;
      font-size: 3.5vw;
      line-height: 6vw;
    }
  }
}

.myTable {
  width: 100%;
  height: 100%;
  position: absolute;
}

#amap-show {
  width: 100%;
  height: 100%;
}
.input input {
  position: relative;
  display: inline-block;
  border-radius: 5px;
  height: 20px;
  margin-right: 20px;
  font-size: 16px;
  line-height: 32px;
  width: 250px;
  padding-left: 8px;
}
.van-cell {
  margin: 5px 20px 5px 0;
  width: auto;
  border-radius: 10px;
  background: bisque;
  line-height: 20px;
}
</style>